<!--歌单列表-->
<template>
    <div class="song-list" v-loading.fullscreen.lock="isLoading">
        <el-row style="margin-bottom: 2vw">
            <el-col :span="24">
                <SongListHeader :details="headerInfo"/>
            </el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row>
            <el-col :span="24">
                <!--type表示列表类别-->
                <SongList :songs="{listId:$route.params.id,allSong:songs,type}"/>
            </el-col>
        </el-row>
        <BackToHead/>
    </div>
</template>

<script>
import SongListHeader from "@/components/SongListHeader.vue";
import SongList from "@/components/SongList.vue";
import {getPlayListAllSongs, getPlayListDetail} from "@/http";
import {TYPEOFSONGLIST} from "@/http/constant";
import BackToHead from "@/minicomponents/BackToHead.vue";

export default {
    name: "songListPage",
    components: {BackToHead, SongList, SongListHeader},
    data() {
        return {
            listDetail: {},
            isLoading: true,
            // 歌单表头数据
            headerInfo: {},
            songs: [],
            dataId: -1
        }
    },
    methods: {
        getSongList(id) {
            // 请求歌单详情数据
            this.isLoading = true
            getPlayListDetail(id).then(res => {
                if (res.code === 200) {
                    this.listDetail = res.playlist
                    // 获取歌单所有歌曲
                    return getPlayListAllSongs(this.$route.params.id)
                }
            }).then(res => {
                if (res.code === 200) {
                    this.songs = res.songs.map(item => {
                        // 将获取到的歌曲信息格式化
                        const {id, name, ar, al, dt, alia} = item
                        return {
                            id,
                            musicName: name,
                            singers: ar,
                            picUrl: al.picUrl,
                            // 专辑信息
                            albumName: {
                                alId: al.id,
                                alName: al.name
                            },
                            time: dt,
                            // 别名
                            alia
                        }
                    })
                    this.isLoading = false
                }
            })
        }
    },
    activated() {
        const {id} = this.$route.params
        if (String(id) !== String(this.dataId)) {
            this.getSongList(id)
        }
        this.dataId = id
    },
    watch: {
        listDetail: {
            deep: true,
            handler(newVal) {
                if (newVal) {
                    const {
                        id,
                        name,
                        coverImgUrl,
                        description,
                        trackUpdateTime,
                        tags,
                        creator: {userId, nickname}
                    } = this.listDetail
                    // 歌单详情头部数据
                    this.headerInfo = {
                        songListId: id,
                        title: name,
                        titleImg: coverImgUrl,
                        creatorId: userId,
                        creator: nickname,
                        updateTime: trackUpdateTime,
                        songNum: 30,
                        description,
                        tags
                    }
                }
            }
        },
        songs: {
            deep: true,
            handler(newVal) {
                if (newVal) {
                    this.headerInfo = {
                        ...this.headerInfo,
                        songNum: newVal.length
                    }
                }
            }
        }
    },
    computed: {
        type() {
            return TYPEOFSONGLIST
        }
    }
}
</script>

<style scoped lang="less">
.song-list {
  //width: 75%;
  //margin: 80px auto;
}
</style>